<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <link href="${ctxPath}/static/theme/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<style>
    .right {
        padding: 10px 0;
        border: 0px solid;
        text-align: right;
    }

    .el-table thead {
        color: #0e0e0e;
        font-weight: 500;
    }
</style>
<body>
<div id="app1">
    <div style="background-color: white ;">
        <div style="padding: 15px 15px 0px 15px">
            <el-form :inline="true" :model="formInline"
                     class="demo-form-inline">
                <el-form-item label="审批人">
                    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="formInline.region" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="padding: 0px 15px 0px 15px">
            <el-button-group>
                <el-button type="success" @click="userAdd">新增</el-button>
                <el-button type="warning">修改</el-button>
                <el-button type="danger">删除</el-button>
            </el-button-group>
        </div>
        <div style="padding: 0px 15px 0px 15px">
            <el-table stripe :data="tableData" :header-cell-style="{background:'#0a6aa1'}" border style="width: 100%"
                      @selection-change="selectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="编号" width="180"></el-table-column>
                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column prop="status" label="状态" :formatter="formatterStatus"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="right">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="pageNum"
                           :page-sizes="[5,10, 20, 30, 40]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <el-dialog title="新增用户" :visible.sync="dialogVisible" width="45%" :before-close="handleClose">
            <!--<el-dialog title="收货地址" :visible.sync="dialogFormVisible">-->
            <el-form :model="form" :rules="rules" ref="ruleForm" style="width: 460px">
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth" prop="address">
                    <el-input v-model="form.address" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
                    <el-select v-model="form.status" placeholder="请选择用户状态">
                        <el-option label="停用" value="0"></el-option>
                        <el-option label="启用" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" :label-width="formLabelWidth" prop="role">
                    <el-select v-model="form.role" placeholder="选择用户角色">
                        <el-option v-for="r in form.roles" :label="r.name" :value="r.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</div>
</body>
<script src="${ctxPath}/static/theme/vue/dist/vue.js"></script>
<script src="${ctxPath}/static/theme/element-ui/lib/index.js"></script>
<script src="${ctxPath}/static/theme/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app1',
        data: function () {
            return {
                tableData: [],
                formInline: {
                    user: "",
                    region: ""
                },
                pageSize: 5,
                pageNum: 1,
                multipleSelection: [],
                total: 0,
                dialogVisible: false,
                form: {
                    name: '',
                    address: '',
                    status: '',
                    role: '',
                    roles: []
                },
                formLabelWidth: "120px",
                rules: {
                    name: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted: function () {
            this.getInfo();
        },
        methods: {
            submitForm(formName) {//表单校验
                var that = this;
                this.$refs[formName].validate(function (isValid) {
                    if (isValid) {
                        that.insertInfo();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleClose() {
                this.dialogVisible = false
                // this.form.roles = []
            },
            selectionChange(selection) {
                this.multipleSelection = selection;
                console.log(selection)
            },
            insertInfo() {//提交新增表单
                var that = this;
                axios.request({
                    url: '${ctxPath}/api/user',
                    // 请求方法同上
                    method: 'post', // default
                    // 请求头信息
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    params: {
                        name:that.form.name,
                        address:that.form.address,
                        status:that.form.status,
                        role:that.form.role,
                    }
                }).then(function (response) {
                    console.log(response)
                    if (response.data.code == "1") {
                        //未登陆时跳转到登录界面
                        window.location.href = "http://localhost:8085/"
                        return;
                    }
                    that.dialogVisible = false
                    that.getInfo()
                }).catch(function (error) {
                    console.log(error);
                });
            },
            userAdd() {//新增按钮触发获取角色
                var that = this;
                axios.request({
                    url: '${ctxPath}/role/roles',
                    // 请求方法同上
                    method: 'get', // default
                    // 请求头信息
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (response) {
                    console.log(response)
                    if (response.data.code == "1") {
                        //未登陆时跳转到登录界面
                        window.location.href = "http://localhost:8085/"
                        return;
                    }
                    that.form.roles = response.data.data;
                    console.log(that.form.roles)
                    that.dialogVisible = true
                }).catch(function (error) {
                    console.log(error);
                });
            },
            onSubmit() {//点击查询按钮触发
                console.log('submit!');
                console.log('参数1：' + this.formInline.region);
                console.log('参数2：' + this.formInline.user);
                this.getInfo();
            },
            handleClick(row) {
                console.log(row);
            },
            getInfo() {
                var that = this;
                axios.request({
                    url: '${ctxPath}/api/user',
                    // 请求方法同上
                    method: 'get', // default
                    params: {
                        pageSize: that.pageSize,
                        pageNum: that.pageNum,
                        userName: this.formInline.user,
                        region: this.formInline.region
                    },
                    // 请求头信息
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (response) {
                    console.log(response)
                    if (response.data.code == "1") {
                        //未登陆时跳转到登录界面
                        window.location.href = "http://localhost:8085/"
                        return;
                    }
                    that.tableData = response.data.data.data;
                    that.total = response.data.data.total
                }).catch(function (error) {
                    console.log(error);
                });
            },
            handleSizeChange(val) {//显示行数
                this.pageSize = val;
                console.log("handlechange：" + val);
                this.getInfo()
            },
            handleCurrentChange(val) {//当前页数
                this.pageNum = val;
                console.log("current change:" + val)
                this.getInfo()
            },
            printInfo() {
                console.log(this.multipleSelection)
                for (var i in  this.multipleSelection) {
                    console.log("名称：" + this.multipleSelection[i].name)
                }
            },
            formatterStatus(row, column, cellValue) {
                if (cellValue == "1") {
                    return "启用";
                } else if (cellValue == "0") {
                    return "停用";
                }
                return cellValue;
            }
        }
    })
</script>

</html>

